<template>
  <div class="main_box">
    <div class="left-content">
      <div class="title_box">
        <div class="top_segment"></div>
        <span>全部应用</span>
      </div>
      <div class="two_title_box">热门</div>
      <div class="title_content_box">
        <div
          class="title_content_card"
          v-for="item in hotList"
          @click="getSelectData(item)"
          :key="item.id"
        >
          {{ item }}
        </div>
      </div>
      <div v-for="item in imageType" :key="item.id">
        <div class="two_title_box">
          {{ item.title }}
        </div>
        <div class="title_content_box">
          <div
            class="title_content_card"
            v-for="(itemn, idx) in item.sur_name"
            :key="idx"
            @click="getSelectTwoData(itemn)"
            :style="{
              border: `1px solid ${item.tagsColor}`,
              color: `${item.tagsColor}`,
              backgroundColor: hexToRgb(item.tagsColor),
            }"
          >
            {{
              itemn.algorithm.length > 1 ? itemn.algorithm : itemn.algorithm[0]
            }}
          </div>
        </div>
      </div>

      <!-- <div class="two_title_box">
                自然语言处理
            </div>
            <div class="title_content_box">
                <div class="title_content_card"
                    :style="index == 2 ? { border: ' 1px solid #FF5733', color: '#FF5733', background: ' #FFF1F0' } : ''">
                    dataDisk
                </div>
            </div>
            <div class="two_title_box">
                多模态
            </div>
            <div class="title_content_box">
                <div class="title_content_card" style="border: 1px solid #FF8D1A;color: #FF8D1A;background:#FFF7F0;">
                    dataDisk
                </div>
            </div> -->
    </div>
    <div class="right-content">
      <div class="right_top_box">
        <div class="right_input">
          <el-input
            placeholder="请输入模型名称"
            v-model="searchInput"
            @keyup.enter.native="searchIamge('search')"
            @blur="searchIamge('search')"
            @clear="searchIamge('search')"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>

          <el-button type="success" @click="searchIamge('search')"
            >搜索</el-button
          >
        </div>

        <div
          style="display: flex; align-items: center; font-size: 14px"
          class="sortBox"
        >
          综合排序：
          <el-select
            v-model="searchValue"
            @change="selectChange"
            class="sortBox_select"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              class="searchInput"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="mirror-list" v-if="mirrorList.length > 0">
        <div
          class="mirror-item"
          v-for="item in mirrorList"
          :key="item.id"
          @click="toMirrorDetails(item.id)"
        >
          <div class="pic">
            <img
              :src="
                basePicUrl +
                item.imageUrl +
                '?x-oss-process=image/resize,w_331,h_161/quality,q_90'
              "
              :alt="item.mirrorName"
              v-if="item.imageUrl && item.imageUrl != ''"
              style="object-fit: contain"
            />
            <img
              v-else
              src="@/static/images/image.png"
              style="object-fit: contain"
            />
          </div>
          <div class="content">
            <div class="title">
              <!-- <span>{{ item.tool.substring(0, 2) }}</span> -->
              <!-- <el-tag
                type="warning"
                v-for="(algo, index) in item.algorithm"
                :key="index"
                v-show="index < 3"
                >{{ algo }}</el-tag
              > -->
              <div
                class="tags"
                v-for="(algo, index) in item.algorithm"
                :key="index"
                :style="{
                  border: `1px solid ${item.tagsColor}`,
                  color: `${item.tagsColor}`,
                  backgroundColor: hexToRgb(item.tagsColor),
                }"
                style=""
              >
                {{ algo }}
              </div>
            </div>
            <div class="name">
              {{ item.mirrorName }}
            </div>
          </div>
          <div class="tag">
            <div class="use">
              <img src="images/use.png" style="width: 16px; height: 16px" />
              <span
                style="
                  margin-top: 4px;
                  margin-left: 8px;
                  font-size: 12px;
                  font-weight: 400;
                  color: rgba(0, 0, 0, 0.65);
                "
                >{{ item.usage }}</span
              >
            </div>
            <div class="upUser" v-if="!isIframe">
              {{ '上传：' + item.username }}
            </div>
            <div class="upUser" v-else>
              <el-button
                type="success"
                @click="selectImage(item)"
                style="border-radius: 2px"
                >选择</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div
        v-else-if="mirrorList.length < 1"
        class="no-content"
        :description="`没有找到相关的镜像`"
      >
        <el-empty :image-size="200"></el-empty>
      </div>

      <div class="pagination" v-if="mirrorList.length > 0">
        <el-pagination
          background
          :current-page="currentPage"
          :page-size="pageSize"
          layout=" prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'main_box',
  components: {},
  data() {
    return {
      options: [
        {
          value: 'hot',
          label: '按热度',
        },
        {
          value: 'new',
          label: '按时间',
        },
      ],
      hotList: [],
      imageType: [],
      basePicUrl: 'https://qroom.oss-cn-chengdu.aliyuncs.com/',
      total: 0,
      pageSize: 8,
      currentPage: 1,
      mirrorList: [],
      searchValue: 'hot',
      searchInput: '',
      filter: {
        where: {
          state: 1,
        },
        include: [
          {
            relation: 'like',
            scope: {
              // where: {
              //   userId: this.$store.getters.userId,
              // },
            },
          },
          {
            relation: 'comment',
          },
        ],
        order: ['usage DESC', 'date_created DESC'],
      },
      isIframe: false,
    }
  },
  computed: {},
  mounted() {},
  async fetch() {
    // 应用列表
    this.filter.skip = (this.currentPage - 1) * this.pageSize
    this.filter.limit = this.pageSize
    this.mirrorList = await this.$generalGet('communityMirrors', {
      filter: this.filter,
    })
    //应用总数
    let res = await this.$generalGet('communityMirrors/count', this.filter)
    this.total = res.count
    // 全部应用分类筛选
    let data = {
      filter: {
        fields: ['imageType', 'algorithm', 'tagsColor'],
        where: { state: 1 },
      },
    }
    await this.$generalGet('communityMirrors', data)
      .then((res) => {
        var moth = [],
          flag = 0,
          list = res
        var wdy = {
          title: '',
          sur_name: '',
          tagsColor: '',
        }
        for (var i = 0; i < list.length; i++) {
          if (list[i].algorithm && list[i].imageType) {
            var az = ''
            for (var j = 0; j < moth.length; j++) {
              if (moth[j].title == list[i]['imageType']) {
                flag = 1
                az = j
                break
              }
            }
            if (flag == 1) {
              var ab = moth[az]
              ab.sur_name.push(list[i])
              let arr = []
              let arr1 = []
              ab.sur_name.forEach((item, index) => {
                arr = arr.concat(item.algorithm)
                if (index == ab.sur_name.length - 1) {
                  arr = [...new Set(arr)]
                  for (let i = 0; i < arr.length; i++) {
                    let data = {
                      algorithm: [arr[i]],
                      imageType: item.imageType,
                    }
                    arr1.push(data)
                  }
                }
              })
              ab.sur_name = arr1
              flag = 0
            } else if (flag == 0) {
              wdy = {}
              wdy.title = list[i]['imageType']
              wdy.tagsColor = list[i]['tagsColor']
              wdy.sur_name = new Array()
              if (list[i].algorithm && list[i].algorithm.length > 1) {
                list[i].algorithm.forEach((item) => {
                  wdy.sur_name.push({
                    algorithm: [item],
                    imageType: list[i]['imageType'],
                  })
                })
              } else if (list[i].algorithm) {
                wdy.sur_name.push(list[i])
              }
              moth.push(wdy)
            }
          }
        }
        this.imageType = moth
      })
      .catch((err) => {
        console.log('err :>> ', err)
      })
  },
  created() {
    if (this.$route.query.iframe) {
      this.isIframe = true
    }
    // this.getCommunityMirror()
    // this.getCount()
    // this.getType()

    setTimeout(() => {
      for (let i = 0; i < this.mirrorList.length; i++) {
        if (i < 8) {
          if (this.mirrorList[i].algorithm) {
            this.hotList = [...this.mirrorList[i].algorithm, ...this.hotList]
          }
        }
      }
      this.hotList = [...new Set(this.hotList)]
    }, 200)
  },
  methods: {
    hexToRgb(hex) {
      // 移除十六进制颜色代码中的'#'
      if (hex) {
        let sanitizedHex = hex.replace('#', '')
        // 解析红、绿、蓝值
        let r = parseInt(sanitizedHex.substring(0, 2), 16)
        let g = parseInt(sanitizedHex.substring(2, 4), 16)
        let b = parseInt(sanitizedHex.substring(4, 6), 16)

        return `rgba(${r}, ${g}, ${b},0.1)`
      } else {
        return `rgba(94,94,94,0.1)`
      }
    },
    selectImage(e) {
      window.parent.postMessage(
        {
          params: {
            mirrorId: e.imageId,
          },
        },
        '*'
      )
    },
    // 热门筛选
    getSelectData(row) {
      this.filter.where = { algorithm: row, state: 1 }
      this.getCount()
      this.getCommunityMirror()
    },
    // 应用筛选
    getSelectTwoData(row) {
      this.filter.where = { algorithm: row.algorithm[0], state: 1 }
      this.getCount()
      this.getCommunityMirror()
    },

    // 跳转
    toMirrorDetails(row) {
      if (!this.isIframe) {
        const { href } = this.$router.resolve({
          path: '/mirrorDetails',
          query: {
            id: row,
          },
        })
        window.open(href, '_blank')
        // this.$router.push({ path: "/mirrorDetails", query: { id: row } });
      }
    },
    async getCount() {
      let res = await this.$generalGet('communityMirrors/count', this.filter)
      this.total = res.count
    },
    async getSearchDataCount(e) {
      let res = await this.$generalGet('communityMirrors/searchDataCount', {
        value: e,
      })
      this.total = res.count
    },
    async getSearchData(e) {
      let searchData = await this.$generalGet('communityMirrors/searchData', {
        value: e,
        pageSize: this.pageSize,
        // userId: this.$store.getters.userId ? this.$store.getters.userId : 123,
        currentPage: this.currentPage,
      })
      this.mirrorList = searchData
    },
    async searchIamge(type) {
      if (type == 'search') {
        this.currentPage = 1
      }
      if (this.searchInput) {
        this.getSearchData(this.searchInput)
        this.getSearchDataCount(this.searchInput)
      } else {
        this.filter.where = { state: 1 }
        this.getCommunityMirror()
        this.getCount()
      }
    },
    selectChange() {
      if (this.searchValue == 'new') {
        this.filter.order = 'date_created DESC'
        this.getCommunityMirror()
      } else {
        this.filter.order = ['usage DESC', 'date_created DESC']
        this.getCommunityMirror()
      }
    },
    getCommunityMirror() {
      this.filter.skip = (this.currentPage - 1) * this.pageSize
      this.filter.limit = this.pageSize
      this.$generalGet('communityMirrors', { filter: this.filter }).then(
        (res) => {
          this.mirrorList = res
        }
      )
    },
    handleCurrentChange(val) {
      this.currentPage = val
      if (this.searchInput) {
        this.searchIamge('page')
      } else {
        this.getCommunityMirror()
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      if (this.searchInput) {
        this.searchIamge('page')
      } else {
        this.getCommunityMirror()
      }
    },
  },
}
</script>

<style scoped lang="scss">
.main_box {
  display: flex;
  width: 97%;
  margin: 40px 24px;

  .left-content {
    width: 320px;
    height: fit-content;
    background-color: rgb(255, 255, 255);

    .title_box {
      display: flex;
      margin: 24px 0 0 25px;

      .top_segment {
        width: 2px;
        height: 15px;
        background-color: rgba(63, 181, 73, 1);
        margin-right: 8px;
      }
    }

    .two_title_box {
      margin: 21px 0 0 24px;
      font-size: 14px;
    }

    .title_content_box {
      margin: 0 0 25px 24px;
      display: flex;
      // width: 75%;
      flex-wrap: wrap;
    }

    .title_content_card {
      width: fit-content;
      height: 22px;
      opacity: 1;
      font-size: 12px;
      border-radius: 2px;
      background: rgba(255, 128, 0, 0.2);
      padding: 0 7px 0 7px;
      border: 1px solid rgba(255, 128, 0, 1);
      color: rgba(255, 128, 0, 1);
      margin-top: 10px;
      margin-right: 16px;
      cursor: pointer;
      line-height: 21px;
    }
  }

  .right-content {
    width: 85%;
    height: fit-content;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    margin-left: 23px;

    .right_top_box {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      .sortBox {
        .sortBox_select {
          // border: 1px solid #f00;
          ::v-deep .el-input__inner {
            border-radius: 4px;
          }
          ::v-deep .el-select-dropdown__item.selected {
            color: #3fb549 !important;
          }
        }
      }
    }

    .right_input {
      width: 50%;
      display: flex;
      ::v-deep .el-input__inner {
        border-color: #3fb549;
      }
      ::v-deep .el-button--success {
        width: 104px;
        height: 40px;
        border-radius: 0px 2px 2px 0px;
        border: 2px solid rgba(63, 181, 73, 1);
        background-color: rgba(63, 181, 73, 1);
        margin-left: -3px;
        z-index: 9;
      }

      ::v-deep .el-input--medium .el-input__inner {
        height: 42px;
        border: 1px solid rgba(63, 181, 73, 1);
        border-radius: 2px 0 0 2px;
        border-right: 0;
      }

      ::v-deep .el-input__prefix {
        color: rgba(63, 181, 73, 1);
      }

      ::v-deep .el-input__icon {
        line-height: 45px;
      }
    }

    .mirror-list {
      display: grid;
      grid-template-columns: repeat(4, 24%);
      justify-content: space-between;
      grid-row-gap: 24px;
      grid-column-gap: 24px;
      margin-top: 24px;
      //overflow-y: scroll;

      .mirror-item {
        height: 300px;
        background-color: #fff;
        padding: 16px;
        // border: 1px solid #ccc;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        box-sizing: border-box;
        &:hover {
          border: 1px solid rgba(63, 181, 73, 1);
        }
        ::v-deep .el-button--success {
          width: 50px;
          height: 30px;
          border-radius: 3px;
          border: 2px solid rgba(63, 181, 73, 1);
          background-color: rgba(63, 181, 73, 1);
          padding: 6px 11px;
          font-size: 12px;
        }

        .pic {
          padding: 0px;
          width: 100%;
          height: 161px;
          // background-color: #f5faff;
          background: rgba(245, 250, 255, 1);
          // padding: 15px;
          text-align: center;

          img {
            width: 100%;
            height: 100%;
            // transform: scale(1.2);
            // overflow: hidden !important;
          }
        }

        .content {
          display: flex;
          flex-direction: column;
          margin-top: 10px;

          .title {
            display: flex;
            flex-wrap: wrap;
            max-height: 27px;
            justify-content: flex-start;
            align-items: center;
            margin: 5px 0;
            overflow: hidden;
            .tags {
              width: fit-content;
              height: 22px;
              font-size: 12px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 2px;
              line-height: 28px;
              padding: 0 7px;
              margin-right: 10px;
              margin-bottom: 5px;
            }

            span {
              &:nth-child(n + 2) {
                margin-left: 10px;
              }
            }

            // ::v-deep .el-tag--warning {
            //   background-color: #fff5eb;
            //   border-color: #ff8d1a;
            //   color: #ff8d1a;
            // }

            // ::v-deep .el-tag--success {
            //   background-color: #f2fff6;
            //   border-color: #36cc61;
            //   color: #36cc61;
            // }
          }

          .name {
            height: 20px;
            line-height: 20px;
            color: #222222;
            font-weight: 400;
            font-size: 14px;
            margin-top: 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
          }

          .desc {
            margin-top: 10px;
            font-size: 14px;
            color: #817e7e;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
          }
        }

        .tag {
          display: flex;
          justify-content: space-between;
          align-items: centers;
          margin-top: 10px;
          font-size: 12px;

          .use {
            display: flex;
            align-items: center;
            color: #817e7e;

            span {
              margin-left: 5px;
            }
          }

          .upUser {
            font-size: 12px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.65);
            line-height: 24px;
            // margin-top: 10px;
          }
        }

        // &:hover {
        //   box-shadow: 0 2px 10px 1px rgba($color: #0776f9, $alpha: 0.2);
        //   border: none;
        // }
      }
    }

    .pagination {
      margin-top: 40px;
      display: flex;
      justify-content: flex-end;

      ::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #3fb549 !important;
      }

      ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #3fb549 !important;
        color: #fff;
      }

      ::v-deep .el-pagination.is-background .el-pager li {
        color: rgba($color: #000000, $alpha: 0.65);
      }
    }
  }
}

@media screen and (max-width: 1600px) {
  .main_box {
    .right-content {
      .mirror-list {
        grid-template-columns: repeat(3, 30%);

        .mirror-item {
          .title {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin: 10px 0 20px 0;
          }

          .pic {
            height: 133px;
            // height: auto;

            img {
              width: 100%;
              height: 100%;
              // transform: scale(1.2);
              // overflow: hidden !important;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 960px) {
  .main_box {
    min-width: 860px;

    .right-content {
      .mirror-list {
        grid-template-columns: repeat(2, 45%);
      }
    }
  }
}

::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: rgba(63, 181, 73, 1);
}

::v-deep .el-select-dropdown__item.selected {
  color: rgba(63, 181, 73, 1) !important;
}

::v-deep .el-select .el-input__inner:focus {
  border-color: rgba(63, 181, 73, 1);
}
::v-deep .el-select .el-input__inner:hover {
  border-color: rgba(63, 181, 73, 1);
}
::v-deep .el-input__inner:focus {
  border-color: rgba(63, 181, 73, 1);
}
</style>
